<%@ page pageEncoding="UTF-8" contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/index.css"/>
  <script src="${pageContext.request.contextPath}/js/vue.js"></script>
  <script src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
  <title>用户注册</title>

</head>
<body>

<jsp:include page="common/header.jsp"/>

<article>
  <!-- 网站主体 -->
  <div id="main">
    <section class="ct">
      <!-- 上传表单-->
      <div class="upload">
        <h1>用户注册①<em>填写信息、完成用户注册第一步。已有账号，请点击<a href="">登录</a></em></h1>
        <!-- 注册步骤导航-->
        <div class="reg_step">
          <a class="step">注册信息</a><a class="step2">基本信息</a><a class="step2">注册完成</a>
        </div>

        <form action="${pageContext.request.contextPath}/user/register" autocomplete="off" id="myform" method="post">

          <p>
            <label>手机号：</label>
            <input class="upt" type="text" v-model="tel" name="tel" @change="checkTel" />
            <em v-text="telMsg"></em>
          </p>
          <p>
            <label>密码：</label>
            <input class="upt" type="password" name="password" @change="checkPwd" v-model="password" placeholder="密码长度为6-20位" />
            <em v-text="pwdMsg"></em>
          </p>
          <p>
            <label>确认密码：</label>
            <input class="upt" type="password" @change="checkPwd2" v-model="confirmPassword" placeholder="请再次输入密码"/>
            <em v-text="pwdMsg2"></em>
            <span class="source-tag-msg">两次输入的密码必须保持一致</span>
          </p>

          <p>
            <label>电子邮箱：</label>
            <input id="email" class="upt" type="text" @change="checkEmail" name="email" v-model="email" placeholder="请输入邮箱"/>
            <em v-text="emailMsg"></em>
            <span class="source-tag-msg">您丢失密码后找回密码的凭证</span>
          </p>

          <p><label class="btn"><a class="btn" @click="registerUser">注册</a></label></p>
        </form>
      </div>
    </section>
  </div>
</article>

<jsp:include page="common/footer.jsp"/>
</body>
<script>
  new Vue({
    el:"#main",
    data:{
      tel:"${user.tel}",
      password:"",
      confirmPassword:"",
      email:"${user.email}",
      telMsg:"${telMsg}",
      pwdMsg:"",
      pwdMsg2:"",
      emailMsg:"${emailMsg}",
    },
    methods:{
      checkTel(){
        if (!/^1[3-9]\d{9}$/.test(this.tel)){
          this.telMsg = "手机号的格式不正确";
          return false;
        }else{
          this.telMsg = "";
          return true;
        }
      },
      checkPwd(){
        if (this.password.length > 20 || this.password.length < 6){
          this.pwdMsg = "密码的长度不合法";
          return false;
        }else{
          this.pwdMsg = "";
          return true;
        }
      },
      checkPwd2(){
        if (this.password != this.confirmPassword){
          this.pwdMsg2 = "两次密码的不一致";
          return false;
        }else{
          this.pwdMsg2 = "";
          return true;
        }
      },
      checkEmail(){
        if (!/^\w+@\w+(\.\w+)+$/.test(this.email)){
          this.emailMsg = "邮箱格式不正确";
          return false;
        }else{
          this.emailMsg = "";
          return true;
        }
      },
      registerUser(){
        if (this.checkTel() & this.checkPwd() & this.checkPwd2() & this.checkEmail()){
          let form = $("#myform");
          form.submit();
        }
      }
    },


  })
</script>
</html>
